<template>
  <div class="w-full flex items-center hover:bg-gray-100 p-2.5 rounded-md">
    <div class="flex items-center lg:mx-0 mx-auto">
      <Icon :name="icon" :color="colorString" :size="sizeString"/>
      <span
        :class="`text-[${colorString}]`"
        class="lg:block hidden pl-[9px] mt-0.5 font-semibold text-[17px]"
      >
                {{ iconString }}
            </span>
    </div>
  </div>
</template>

<script>
export default {
  props: ['iconString', 'colorString', 'sizeString'],
  data() {
    return {
      icon: ''
    }
  },
  watch:{
    iconString:{
      handler(newVal){
        if (newVal === 'For You') this.icon = 'icon-shouye'
        if (newVal === 'Following') this.icon = 'icon-yonghubangding-copy'
        if (newVal === 'LIVE') this.icon = 'icon-zhibo1'
      },immediate:true
    }
  }
}
</script>
